<template>
    <div class="main">
        <div>
            <el-form label-width="150px">
                <h2>vue3登录页面</h2>
                <el-form-item label="用户:">
                    <el-input v-model="form.username" class="input" />
                </el-form-item>
                <el-form-item label="密码:">
                    <el-input v-model="form.password" class="input" />
                </el-form-item>
                <div style="text-align: center;">
                    <el-button type="primary" style="width: 100px;" @click="Login">登录</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script setup>

import { reactive } from "vue";
import { useRouter } from 'vue-router'

let form = reactive({
    username: "19977745241", password: "123456"
})

const router = useRouter();

function Login() {
    localStorage.setItem('token', "123456");
    router.push('/')

}


</script>

<style  scoped >
.main {
    width: 100%;
    height: 780px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main>div {
    width: 500px;
    height: 200px;
    background: rgb(199, 223, 245);
    text-align: center;
    border-radius: 15px;
    padding: 15px 15px 30px;
    border: 2px solid rgb(192, 218, 242);

}

.input {
    width: 250px;
}
</style>